
<!DOCTYPE html>
<html>
    <head>
        <title>join or create a conversation</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="jquery-1.8.3.js"></script>
        
        <script>
            // load conversations from conversations
            var loadConversations = function() {
                $.get(
                        "conversations", 
                        function(data) {
                            // set as content in div with id conversations
                            $("#conversations").html(data);
                        }
                );
            }
            $().ready( function() {
                // load conversation after page is loaded
                loadConversations();
            });

        </script>
        
    </head>
    <body>
        <h3>Join or Create a Conversation</h3>
        
        <form action="join" method="POST">
            <table>
                <tr><td>conversation:</td><td><input id="conversation" name="conversation" type="text" size="42" /></td></tr>
                <tr><td>nick name:</td><td><input id="user" name="user" type="text" size="42" /></td></tr>
                <tr><td colspan="2"><input type="submit" value="join"/></td>
            </table>
        </form>
        
        <p/>
        <b>Existing conversations 
            <!-- load conversation when button is pressed loaded -->
            <button onclick="loadConversations()">refresh</button></b>
        <p/>
        <div id="conversations"></div>
    </body>
</html>
